import React from 'react';
import { Tag } from 'antd';

export default class Tags extends React.PureComponent {
  render() {
    const value = this.props.cellData;
    return value.map((element, index) => {
      if (element.color === 'blue') {
        return (
          <Tag
            key={element.text}
            style={{
              color: '#2761FF',
              backgroundColor: '#E6F7FF',
              borderRadius: 0,
              borderWidth: 0,
            }}
            {...element.props}
          >
            {element.text}
          </Tag>
        );
      }

      if (element.color === 'orange') {
        return (
          <Tag
            key={element.text}
            style={{
              color: '#FA541C',
              borderColor: '#FA541C',
              backgroundColor: '#FFF2E8',
              borderRadius: element.border ? 3 : 0,
              borderWidth: element.border ? 1 : 0,
            }}
            {...element.props}
          >
            {element.text}
          </Tag>
        );
      }
      if (element.color === 'gray') {
        return (
          <Tag
            key={element.text}
            style={{
              color: '#91A1AA',
              backgroundColor: '#F3F8FB',
              borderRadius: 0,
              borderWidth: 0,
            }}
            {...element.props}
          >
            {element.text}
          </Tag>
        );
      }
      if (element.color === 'green') {
        return (
          <Tag
            key={element.text}
            style={{
              color: '#52C41A',
              borderColor: '#52C41A',
              backgroundColor: '#F6FFED',
              borderRadius: 3,
              borderWidth: 1,
            }}
            {...element.props}
          >
            {element.text}
          </Tag>
        );
      }
      if (element.color === 'red') {
        return (
          <Tag
            key={element.text}
            style={{
              color: '#fff',
              borderColor: 'rgba(227, 60, 100, 1)',
              backgroundColor: 'rgba(227, 60, 100, 1)',
              borderRadius: 3,
              borderWidth: 1,
            }}
            {...element.props}
          >
            {element.text}
          </Tag>
        );
      }
      if (element.color === 'pink') {
        return (
          <Tag
            key={element.text}
            style={{
              color: '#EB2F96',
              borderColor: '#FFADD2',
              backgroundColor: '#FFF0F6',
              borderRadius: 3,
              borderWidth: 1,
            }}
            {...element.props}
          >
            {element.text}
          </Tag>
        );
      }
    });
  }
}
